<!--
 * @Descripttion:
 * @version:
 * @Author: xiajunchen
 * @Date: 2021-05-28 10:19:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-01 09:27:31
-->
<template>
  <EditForm
    :rules="rules"
    :form-list="formList"
    @submit="submit"
  >
    <el-input />
  </EditForm>
</template>
<script>
import EditForm from '@/components/EditForm'
export default {
  components: {
    EditForm
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      callback()
    }
    var checkAgenumber = (rule, value, callback) => {
      var reg = /^\d+$/
      if (!reg.test(value)) {
        return callback(new Error('年龄必须为数字'))
      }
      callback()
    }
    return {
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请选择活动区域', validator: checkAge, trigger: 'blur' },
          { message: '年龄必须为数字值', validator: checkAgenumber }
        ]

      },
      formList: [{
        type: 'Txt', // 组件名称  only为仅展示。不需要进行编辑的，没有调用任何组件
        value: 'S0123654',
        label: '书院编号',
        key: 'number'
      }, {
        type: 'Input',
        value: 'zhongruanguoji001',
        key: 'account',
        label: '请输入账号',
        placeholder: '请输入您的账号'
      }, {
        type: 'Input',
        value: 28,
        key: 'age',
        label: '您的年龄',
        placeholder: '请输入您的年龄'
      },
      {
        type: 'TimeRange',
        // key: 'dateRange',
        subType: 'datePicker', // datePicker, timePicker, dateTimePicker分别对应elementui中的日期选择器、时间选择器、日期时间选择器， 默认是datePicker
        startPlaceholder: '请选择开始时间',
        endPlaceholder: '请选择结束时间',
        value: ['2021-02-03 08:06:30', '2021-08-24 08:06:30'],
        // key: 'dateRange', // 将以下两个字段合并为一个字段，用逗号[,]分隔
        startkey: 'startTime',
        endkey: 'endTime',
        label: '时间'
      }]
    }
  },
  methods: {
    submit({ isPass, params }) {
      console.log(isPass, params, 'isPass, params')
    }
  }
}
</script>
